<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二升三阶段机试</title>
    <style>
       #g span{
           cursor:pointer;
           border: 1px solid black;
           padding: 5px
       }
       #g span.active{
           background: red;
       }
    </style>
</head>
<body>
<form >
    <table >
        <tbody >
            <tr>
                <td>商品名称：</td>
                <td><input type="text" name="nameId"></td>
            </tr>
            <tr>
                <td>商品类别：</td>
                <td><select id="aa">
                        <option >优选水果</option>
                        <option >卤味熟食</option>
                        <option >饮料酒水</option>
                        <option >休闲零食</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>商品原价:</td>
                <td><input type="text" name="price"></td>
            </tr>
            <tr>
                <td>商品现价：</td>
                <td><input type="text" name="reprice"></td>
            </tr>
            <tr>
                <td>库存数量</td>
                <td><input type="text" name="number"></td>
            </tr>
            <tr>
                <td>是否标红</td>
                <td>
                    <input type="radio" name="y" value="true" checked="checked" >是
                    <input type="radio" name="y" value="false" >否
                </td>
            </tr>
            <tr>
                <td><input type="button" value="提交信息"></td>
            </tr>
        </tbody>
    </table>
</form>

<hr>
<div>
    <div id="g">
        <span class="active">全部</span>
        <span>优选水果</span>
        <span>卤味熟食</span>
        <span>饮料酒水</span>
        <span>休闲零食</span>
    </div>
</div>
    
<hr>
<table border="1" bordercolor="red">
    <thead>
        <tr>
            <td>商品名称</td>
            <td>商品类别</td>
            <td>原价</td>
            <td>现价</td>
            <td>库存</td>
            <td>是否标红</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody class="tbodys">
       
    </tbody>
</table>

</body>
<script src="./index.js"></script>
</html>